<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"
          name="viewport">
    <title>风间网盘-上传文件</title>
    <link rel="shortcut icon" href="/static/img/yun.png"/>
    <link rel="stylesheet" href="/static/u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/u-admin/dist/modules/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
          href="/static/u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

    <link rel="stylesheet" href="/static/u-admin/dist/modules/summernote/summernote-lite.css">
    <link rel="stylesheet" href="/static/u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="/static/u-admin/dist/css/demo.css">
    <link rel="stylesheet" href="/static/u-admin/dist/css/style.css">
    <link rel="stylesheet" href="/static/css/upload-file.css">
    <link rel="stylesheet" href="/static/plug-ins/xcConfirm/css/xcConfirm.css">
    <link rel="stylesheet" href="/static/plug-ins/context-menu/css/contextMenu.css">
    <style>
        .files-items {
            margin-top: -20px;
            border-bottom: 1px dashed #bdc3c7;
            border-top: 1px dashed #bdc3c7;
        }

        .files-items:hover {
            background: #F4FBFF;
        }
    </style>

</head>

<body>
<div id="app">
    <div class="main-wrapper">
        <div class="navbar-bg"></div>
        {{template "menu-top" .}}
        {{template "menu-sidebar" .}}
        <div class="main-content">
            <section class="section">
                <h1 class="section-header">
                    <div><i class="ion ion-folder"></i> 上传文件
                        <span style="color: red;font-size: 14px"></span>
                    </div>
                </h1>
                <div class="row">
                    <div class="col-12 col-sm-12 col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <h4>当前路径</h4>
                                <nav aria-label="breadcrumb" class="empty-space">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item">
                                            <a href="/cloud/upload/?fId={{.fId}}" title="刷新"><i
                                                        class="icon ion-refresh"></i></a>
                                        </li>
                                        <li class="breadcrumb-item active">
                                            {{if eq .fId 0}}
                                                <span>根目录 &nbsp /</span>
                                            {{else}}
                                                <span></span>
                                                <a style="font-weight: bold" href="/cloud/upload">根目录</a>
                                            {{end}}

                                        </li>

                                        {{range .currentAllParent}}
                                            <li class="breadcrumb-item">
                                                <a style="font-weight: bold"
                                                   href="/cloud/upload?fId={{.Id}}&fName={{.FileFolderName}}">
                                                    {{.FileFolderName}}
                                                </a>
                                            </li>
                                        {{end}}

                                        {{if ne .fId 0}}
                                            <li class="breadcrumb-item action" aria-current="page">
                                                {{.fName}}
                                            </li>
                                        {{end}}

                                        {{if ne .fId 0}}
                                            <li class="breadcrumb-item">
                                                <a href="/cloud/upload?fId={{.parentFolder.ParentFolderId}}"
                                                   title="返回上一层">
                                                    <i class="icon ion-arrow-return-left"></i>
                                                </a>
                                            </li>
                                        {{end}}
                                    </ol>
                                </nav>
                            </div>
                            <div class="card-body table-responsive">
                                <div id="uploader" style="margin-top: -10px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <h4>预览</h4>
                            </div>
                            <div class="card-body">
                                <div class="row" style="margin-top: -10px;">
                                    <div class="col-12 col-sm-12 col-lg-12 table-responsive">
                                        <table class="table tab-bordered text-nowrap" id="files-table">
                                            {{range .fileFolders}}
                                                <tr class="files-items folders">
                                                    <td><span style="display: none">{{.Id}}</span>
                                                        <i style="font-size: 24px;color: orange"
                                                           class="icon ion-android-folder"></i>
                                                    </td>
                                                    <td>
                                                        <a href="/cloud/upload?fId={{.Id}}&fName={{.FileFolderName}}" style="font-weight: 700;color: black">
                                                            {{.FileFolderName}}
                                                        </a>
                                                    </td>
                                                    <td style="font-weight: 300">
                                                        {{.Time}}
                                                    </td>
                                                </tr>
                                            {{end}}
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <span id="nowF" style="display: none">{{.fId}}</span>
            <span id="preF" style="display: none" th:text="${nowFolder.parentFolderId}"></span>
            <span id="tarFolder" style="display: none"></span>
        </div>
        {{template "menu-footer"}}
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $('.folders').dblclick(function () {
            let id = $(this).children("td").children("span").html();
            var location = window.location.href;
            let strings = location.split("?");
            if (id != "") {
                window.location.href = strings[0] + "?fId=" + id;
            } else {
                return;
            }
        });
        $('.folders').hover(function () {
            let id = $(this).children("td").children("span").html();
            $('#tarFolder').html(id);
            $(this).siblings().removeClass('flag');
            $(this).addClass('flag');
        }, function () {
        });
    });
</script>
<script src="/static/plug-ins/context-menu/js/jquery.contextMenu.min.js"></script>
<script src="/static/plug-ins/xcConfirm/js/xcConfirm.js"></script>
<script>
    $(".folders").contextMenu({
        width: 100, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#fff", // 背景颜色
        color: "#333", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#3498db", // hover背景颜色
        target: function (ele) { // 当前元素
            console.log(ele);
        },
        menu: [{ // 菜单项
            text: " 打开",
            callback: function () {
                let id = $('#tarFolder').html();
                var location = window.location.href;
                let strings = location.split("?");
                if (id != "") {
                    window.location.href = strings[0] + "?fId=" + id;
                } else {
                    return;
                }
            }
        },
            {
                text: " 返回上一级",
                callback: function () {
                    toPreFolder();
                }
            }
        ]

    });

    function toPreFolder() {
        var location = window.location.href;
        let strings = location.split("?");
        var pre = $('#preF').html();
        if (pre != "") {
            window.location.href = strings[0] + "?fId=" + pre;
        } else {
            return;
        }
    }

</script>
<script src="/static/js/easyUploader.jq.js"></script>
<script>
    var uploader = easyUploader({
        id: "uploader",
        accept: '',
        action: 'uploadFile',
        dataFormat: 'formData',
        headers: {
            id: $('#nowF').html()
        },
        maxCount: 10,
        maxSize: 1024,
        multiple: true,
        data: null,
        beforeUpload: function (file, data, args) {
            /* dataFormat为formData时配置发送数据的方式 */
            data.append('token', '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT');
            data.append('otherKey', 'otherValue');

            /* dataFormat为base64时配置发送数据的方式 */
            // data.base = file.base;
            // data.token = '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT';
            // data.otherKey = 'otherValue';
        },
        onChange: function (fileList) {
            /* input选中时触发 */
            // document.body.onbeforeunload = function () {
            //     window.event.returnValue = "确认离开？";
            // }
        },
        onRemove: function (removedFiles, files) {
            console.log('onRemove', removedFiles);
        },
        onSuccess: function (res) {
            var code = res["code"];
            console.log(code);
            if (code == 501) {
                alert("当前目录存在同名文件，请删除后再试！");
            }
            if (code == 502) {
                alert("文件名不符合规范，支持【汉字,字符,数字,下划线,英文句号,横线】");
            }
            if (code == 503) {
                alert("仓库容量不足，上传失败！");
            }
            if (code == 504) {
                alert("服务器出错了！");
            }
            // document.body.onbeforeunload = function () {
            //     window.event.returnValue = "确认离开？";
            // }
        },
        onError: function (err) {
            console.log('onError', err);
        },
    });
</script>
<script src="/static/u-admin/dist/modules/jquery.min.js"></script>
<script src="/static/u-admin/dist/modules/popper.js"></script>
<script src="/static/u-admin/dist/modules/tooltip.js"></script>
<script src="/static/u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="/static/u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="/static/u-admin/dist/js/sa-functions.js"></script>

<script src="/static/u-admin/dist/modules/chart.min.js"></script>
<script src="/static/u-admin/dist/modules/summernote/summernote-lite.js"></script>

<script src="/static/u-admin/dist/js/scripts.js"></script>
<script src="/static/u-admin/dist/js/custom.js"></script>
<script src="/static/u-admin/dist/js/demo.js"></script>
<script src="/static/u-admin/dist/modules/chart.min.js"></script>
</body>
</html>
